<template>
  <a-page-header class="b-header" :isScroll="isScroll">
    <template #title>
      <a-avatar
        :src="avatar.src"
        :size="avatar.size || 'large'"
        :shape="avatar.shape || 'square'"
      ></a-avatar>
    </template>
    <template #tags>
      <a-tag v-for="tag of tags" :color="tag.color" :key="tag.text">{{
        tag.text
      }}</a-tag>
    </template>
    <template #extra>
      <a-button v-for="item of menu" @click="item.handler" :key="item.text">{{
        item.text
      }}</a-button>
      <transition name="fade" mode="out-in">
        <a-button type="primary" v-if="editShowStatus" @click="handlerEdit">
          <PaperClipOutlined />
          看看写了啥
        </a-button>
      </transition>
    </template>
  </a-page-header>
</template>

<script>
import { PageHeader } from "ant-design-vue";
import { useWindowScrollStatus } from "@u/scroll.js";
import { PaperClipOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { computed } from "vue";
import { useRoutePathToPage } from "@u/router";
export default {
  components: {
    APageHeader: PageHeader,
    PaperClipOutlined,
  },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const { avatar = {}, tags = [], menu = {} } = props.config || {};
    const isScroll = useWindowScrollStatus();
    const route = useRoute();
    const editShowStatus = computed(() => route.name !== "ManageArticle");
    const handlerEdit = useRoutePathToPage("/manage/Article/1");
    return {
      avatar,
      tags,
      menu,
      isScroll,
      editShowStatus,
      handlerEdit,
    };
  },
};
</script>

<style>
.b-header {
  position: sticky;
  top: 0;
  z-index: 99;
  padding: 10px;
  transition: all 0.3s ease-in-out;
}

.b-header:hover,
.b-header[isScroll="true"] {
  transition: all 0.3s ease-in-out;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
}
</style>